<!--树形下拉-->
<template>
  <el-select
    ref="multiSelect"
    v-model="selectedTitle"
    class="base-tree-select"
    popper-class="base-tree-popper"
    :placeholder="placeholder"
    :disabled="disabled"
    filterable
    remote
    :remote-method="remoteMethod"
  >
    <!--展示当前选择项-->
    <el-option :label="selectedTitle" :value="selectedTitle">
      <!--数据源-->
      <!-- default-expand-all -->
      <el-tree
        ref="baseTreeSelect"
        class=""
        style="display: flex; flex-direction: column"
        :data="treeData"
        node-key="id"
        :check-on-click-node="true"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "BaseTreeSelect",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    // 显示上级状态
    displaySuperiorState: {
      type: Boolean,
      default: false,
    },
    // 回显的上级名称用这个必须显示状态为true,否则无效
    superiorName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectedTitle: "",
      selectedValue: null,
    };
  },
  watch: {
    value: function() {
      this.setDefaultNode();
    },
  },
  methods: {
    // 设置默认值
    setDefaultNode() {
      if (!this.value) {
        this.selectedTitle = "";
        this.selectedValue = "";
        return false;
      }
      // 设置默认选中
      this.$nextTick(() => {
        this.$refs.baseTreeSelect.setCurrentKey(this.value);
        // 获取默认选中
        const defaultNode = this.$refs.baseTreeSelect.getCurrentNode();
        if (defaultNode) {
          if (this.displaySuperiorState) {
            this.selectedTitle = this.superiorName;
          } else {
            this.selectedTitle = defaultNode.label;
          }
          this.selectedValue = defaultNode.value;
        }
      });
    },
    // 点击节点项
    handleNodeClick(data, node) {
      const path = [];
      let parentLabel = node;
      // 当前选中节点
      path.push(data.label);
      if (node.level > 1) {
        // 变量上级父节点
        for (let i = 1; i < node.level; i++) {
          parentLabel = parentLabel.parent;
          if (parentLabel !== null && parentLabel !== undefined) {
            path.push(parentLabel.data.label);
          }
        }
        // 反转
        path.reverse();
      }
      // 回显
      if (this.displaySuperiorState) {
        var selectedTitle = path.join("/");
        this.selectedTitle = selectedTitle;
        this.$emit("update:superiorName", selectedTitle);
      } else {
        this.selectedTitle = data.label;
      }
      this.selectedValue = data.value;
      this.$emit("input", data.value);
      this.$emit("node-click", data);
      this.$refs.multiSelect.blur();
    },
    // 筛选
    remoteMethod(query) {
      this.$refs.baseTreeSelect.filter(query);
    },
    // 树形筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>
<style lang="less">
</style>
<style lang="scss">
.base-tree-select {
  width: 100%;
}
.base-tree-popper {
  max-height: 240px;
  overflow: auto;
  .el-select-dropdown__item {
    height: max-content;
    padding: 0;
    font-weight: 500;
    .hover {
      background: #fff;
    }
    .el-tree-node__content {
      height: 34px;
      line-height: 34px;
      font-weight: normal;
    }
    .is-current {
      & > .el-tree-node__content {
        .el-tree-node__label {
          color: #409eff;
        }
      }
    }
  }
}
</style>
